<template>
	<view class="pageswiper">
		<swiper class="swiper" @change="pagechange" :current="currentpage">
			<swiper-item>
				<view class="swiper-item" v-if="swiper_view == '主页'">
					<City :currentpage="currentpage"></City>
				</view>
				<view class="swiper-item" v-if="swiper_view == '关注'">
					<follow-right></follow-right>
				</view>
			</swiper-item>
			<swiper-item class="item">
				<view class="swiper-item" v-if="swiper_view == '主页'">
					<video-list></video-list>
				</view>
				<view class="swiper-item" v-if="swiper_view == '关注'">
					<follow-left></follow-left>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import VideoList from './VideoList.vue';
	import FollowLeft from './FollowLeft.vue';
	import FollowRight from './FollowRight.vue';
	import City from './City.vue';


	export default {
		name: "PageSwiper",
		components: {
			VideoList,
			City,
			FollowLeft,
			FollowRight,
		},
		data() {
			return {
				currentpage: 1,
			};
		},
		props: {
			swiper_view: {
				default: '主页',
				type: String,
			},
			list: {},
		},
		methods: {
			pagechange(e) {
				this.currentpage = e.detail.current;
				this.$bus.$emit('changepage', e.detail.current);
			},
			clickpagechange() {
				this.$bus.$on('clickchangepage', (e) => {
					this.currentpage = e;
				})
			},
		},
		created() {
			this.clickpagechange();
		}
	}
</script>

<style lang="scss">
	.pageswiper {
		width: 100%;
		height: 100%;

		// height: calc(100% - 100px);
		.swiper {
			height: 100%;

			.swiper-item {
				height: 100%;
			}
		}
	}
</style>
